<!--
 * @Author: zhangyang
 * @Date: 2022-03-01 20:04:26
 * @LastEditTime: 2022-03-11 16:46:38
 * @Description: 节点列表
-->
<script lang="ts" setup>
import { addNode, delNode, editNode, getNodeList } from '@/api/system';
import YoungTablePro from '@/components/YoungTablePro.vue';
import { Icons } from '@/typings/icons';
import type { TableDataItem, TableHeadItemPro } from '@/typings/table';
import type { EditNodeItem } from '@/typings/type';
import { NButton, NSpace, NSwitch, type SelectOption } from 'naive-ui';
import useFormMode from '@/hooks/useFormMode';
import { expandNodeKeys } from '@/stores';

const iconsArr: SelectOption[] = [];
for (const [key, value] of Object.entries(Icons)) {
  iconsArr.push({
    label: () => h('div', {}, {
      default: () => [
        h(value, { class: 'mr-2' }),
        h('span', key),
      ]
    }),
    value: key,
  });
}

const FORM_TEMP: EditNodeItem = {
  autoid: 0,
  node_name: '',
  parent_id: 0,
  node_id: 0,
  node_path: '',
  node_desc: '',
  is_show: 1,
  node_type: 1,
  node_sort: 0,
  icon_name: ''
};
const {
  form,
  isAdd,
  isEdit,
  edit,
  del,
  clear,
  sure
} = useFormMode<EditNodeItem>(FORM_TEMP, {
  addCbk: async () => {
    await addNode(form.value);
    window.$message.success('新增成功！');
  },
  modCbk: async () => {
    await editNode(form.value);
    window.$message.success('修改成功！');
  },
  delCbk: async (row) => {
    await delNode(row.autoid);
    window.$message.success('删除成功！');
  },
  cgEffect: () => getList()
});

const add = (row?: TableDataItem<EditNodeItem>) => {
  form.value.parent_id = row?.parent_id ?? 0;
  form.value.node_type = (row?.node_type ?? 0) + 1;
  if (row?.node_type === 3 || row?.is_show === 0) {
    form.value.is_show = 0;
  }
  isAdd.value = true;
};

const renderOperate = (row: TableDataItem<EditNodeItem>) => {
  return h(NSpace, {}, {
    default: () => [
      h(
        NButton,
        { type: 'info', size: 'small', ghost: true, onClick: () => edit(row) },
        { default: () => '编辑' }
      ),
      h(
        NButton,
        { type: 'error', size: 'small', ghost: true, onClick: () => del(row) },
        { default: () => '删除' }
      ),
      row.node_type < 4
        ? h(
            NButton,
            { type: 'success', size: 'small', ghost: true, onClick: () => add(row) },
            { default: () => '添加子节点' }
          )
        : null,
    ]
  });
};

const tableHead: TableHeadItemPro<EditNodeItem>[] = [
  { key: 'node_name', title: '节点名称' },
  { key: 'autoid', title: '节点ID' },
  { key: 'parent_id', title: '父节点' },
  { key: 'node_path', title: '鉴权路径' },
  { key: 'node_desc', title: '节点描述' },
  { key: 'is_show', title: '隐藏/显示', render: (row) => h(NSwitch, { value: !!row.is_show, disabled: true }) },
  { key: 'node_type', title: '节点级别' },
  { key: 'autoid', title: '操作', render: renderOperate, width: '320' }
];
const tableData = ref<TableDataItem<EditNodeItem>[]>([]);

const getList = async () => {
  const arr = await getNodeList();
  tableData.value = deepClone(arr);
};

getList()
</script>

<route lang="yaml">
meta:
  title: 节点列表
  authPath: 10000/5
</route>

<template>
  <div>
    <div class="m-2">
      <NButton type="success" ghost @click="() => add()">添加一级节点</NButton>
    </div>
    <div class="m-2">
      <YoungTablePro
        :table-data="tableData"
        :table-head="tableHead"
        children-key="part"
        :row-key="(item: EditNodeItem) => item.autoid"
        v-model:expanded-row-keys="expandNodeKeys"
      />
    </div>
    <YoungDialog
      :is-add="isAdd"
      :is-edit="isEdit"
      @clear="clear"
      @sure="sure"
    >
      <template #body>
        <NForm :model="form" label-placement="left">
          <NFormItem label="节点名称">
            <NInput v-model:value="form.node_name" />
          </NFormItem>
          <NFormItem label="节点描述">
            <NInput v-model:value="form.node_desc" />
          </NFormItem>
          <NFormItem label="鉴权路径">
            <NInput v-model:value="form.node_path" />
          </NFormItem>
          <NFormItem label="节点排序">
            <NInputNumber v-model:value="form.node_sort" />
          </NFormItem>
          <NFormItem label="节点状态">
            <NRadioGroup v-model:value="form.is_show">
              <NSpace>
                <NRadio :value="0">隐藏</NRadio>
                <NRadio :value="1">显示</NRadio>
              </NSpace>
            </NRadioGroup>
          </NFormItem>
          <NFormItem label="节点图标">
            <NSelect v-model:value="form.icon_name" :options="iconsArr" filterable />
          </NFormItem>
          <NFormItem label="父级节点">
            <NInputNumber :value="form.parent_id" disabled />
          </NFormItem>
        </NForm>
      </template>
    </YoungDialog>
  </div>
</template>

<style lang="scss" scoped>

</style>